<template>
	<view class="container">
		<swiper :indicator-dots="true" class="swiper">
			<swiper-item v-for="(item,index) in productItem.images" :key="index" class="swiper-item">
				<view class="swiper-item">
					<image :src="`http:${item}`" @click="previeImg(index)"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="pro-basic-box">
			<view class="title">
				{{productItem.title}}
			</view>
			<view class="price">
				{{productItem.price|RMB}}
			</view>
			<view class="other">
				<view>
					{{productItem.freight}}
				</view>
				<view>
					{{productItem.sales}}
				</view>
			</view>
		</view>

		<view class="pro-gg-box">
			<rich-text :nodes="productItem.bodys"></rich-text>
		</view>
		
		<view class="pro-comment-box">
			<view class="title">
				商品评价
			</view>
			<view class="main">
				<view class="main-1" v-for="(item,index) in reviewList" :key="index">
					<view class="main-1-1">
						<view class="head-image">
							<image v-if="item.head" :src="`http:${item.head}`" mode=""></image>
							<image v-else :src="defaultHead"></image>
						</view>
						<view class="nickName">
							<text>{{item.nickname}}</text>
						</view>
					</view>
					<view class="main-1-2">
						<text>{{item.content}}</text>
					</view>
					<view class="main-1-3">
						<text>{{item.times}}</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="btn" @click="getMoreComment">添加更多评论</view>
			</view>
		</view>
		<view class="nav-goods">
			<uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @buttonClick="buttonClick"></uni-goods-nav>
		</view>
		<u-popup :show="show">
		 <view class="pop-box">
		     <view class="close" @click="closePop">
				<u-icon name="close"></u-icon>
		     </view>
			 <view class="product-basic-box">
			 	<view class="product-basic-box-1">
					<image v-if="productItem.images" :src="`http:${productItem.images[0]}`"></image>
			 	</view>
				<view class="product-basic-box-2">
					<view class="product-basic-box-2-top">
						{{productItem.title}}
					</view>
					<view class="product-basic-box-2-bottom">
						<view class="price">
							{{productItem.price|RMB}}
						</view>
						<view class="no">
							商品编号:{{productItem.gid}}
						</view>
					</view>
				</view>
			 </view>
			 <view class="product-other-box">
				 <scroll-view :scroll-y="true" style="height: 300rpx;">
					 <view class="product-spec-box" v-for="(item,index) in specList" :key="index">
					 	<view class="title">
					 		<text>{{item.title}}</text>
					 	</view>
					 	<view class="main">
					 		<view :class="{'spec-item':true,'active':activeAry.includes(sitem.value)}" 
					 			v-for="(sitem,sindex) in item.values" 
					 			:key="sindex"
					 			@click="selectProductSpec(item,sitem)">
					 			{{sitem.value}}
					 		</view>
					 	</view>
					 </view>
				 </scroll-view>
				
				<!-- 购买数量容器 -->
				<view class="product-count-box">
					<view class="title">
						购买数量:
					</view>
					<view class="number-box">
						<u-number-box v-model="shopcartItem.count"></u-number-box>
					</view>
				</view>
			 </view>
			 
			 <!-- 确认按钮-->
			 <view class="confirmBtnbox">
			 	<u-button type="primary" color="#f00" class="confirmbtn" @click="addShopcart">确定</u-button>
			 </view>
		 </view>
		</u-popup>
	</view>
</template>

<script>
	//从vuex中导入createNamespacedHelpers工具方法，使用该方法主要完成对vuex模块的引入
	import {createNamespacedHelpers} from 'vuex'
	//调用createNamespacedHelpers方法来引入shopcart模块
	const {mapMutations:mapShopcartMutations,mapState:mapShopcartState,mapGetters:mapShopcartGetters}=createNamespacedHelpers('shopcart')
	//映射的原则mutations或者actions中的方法都在methods选项中映射,如果是getters或者state中的都是在computed选项中映射的
	const {mapState:mapUserState}=createNamespacedHelpers('user')
	export default {
		data() {
			return {
				page:1,
				reviewList:[],
				gid:0,
				flag:false,
			    defaultHead: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				productItem: {},
				options: [{
						text: '收藏',
						icon: 'star-filled'
					},
					{
						text: '购物车',
						icon: 'cart',
						info:'',
						infoBackgroundColor:'#f00',
						infoColor:'#fff'
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				show:false,
				specList:[],
				activeMap:new Map(),
				activeAry:[],
				shopcartItem:{
					count:1
				}
			}
		},
		computed:{
			...mapShopcartState(['shopcartList']),
			...mapShopcartGetters(['getShopcartSize']),
			...mapUserState(['authToken','userInfo'])
		},
		watch:{
			getShopcartSize:{
				handler(arg){
					const result=this.options.find(item=>item.text=='购物车')
					result.info=arg;
				},
				immediate:true
			}
		},
		methods: {
			...mapShopcartMutations(['addToShopcart']),
			async getProductDetail(gid) {
				const result = await uni.$api.home.getProductDetailApi(gid)
				this.productItem = result.data.data
				console.log('productItem', result.data.data);
			},
			previeImg(index) {
				uni.previewImage({
					current: index,
					urls: this.productItem.images.map(item => `http:${item}`)
				})
			},
			async getReviewsByGid(data){
				const result=await uni.$api.home.getReviewsByGid(data)
				console.log('result',result.data.data);
				if(result.data.data=="没有数据"){
					if(this.flag){
						uni.showToast({
							title:'没有评论了'
						})
					}
				
					
				}else{
					this.reviewList=[...this.reviewList,...result.data.data]
				}
				
			},
			getMoreComment(){
				this.flag=true
				this.page+=1
				console.log('page',this.page);
				this.getReviewsByGid({gid:this.gid,page:this.page})
			},
			buttonClick(e){
				switch(e.index){
					case 0:
						this.getSafe()
						this.show=true
					//将body部分设置成固定定位
					// #ifdef H5
					document.querySelector("body").style.position="fixed"
					// #endif
					break;
				}
			},
			async getProductSpec(gid){
				const result=await uni.$api.home.getProductSpecApi(gid)
				console.log('规格',result.data.data);
				this.specList=result.data.data
			},
			selectProductSpec(arg1,arg2){
				this.activeMap.set(arg1.title,arg2.value)
				this.activeAry=Array.from(this.activeMap.values())
			},
			closePop(){
				this.show=false;
				// #ifdef H5
				document.querySelector("body").style.position="static"
				// #endif
			},
			addShopcart(){
				//设置购物车的商品id对象
				this.shopcartItem.gid=this.productItem.gid;
				//设置购物车对象的勾选状态
				this.shopcartItem.checked=true;
				//设置购物车对象的标题
				this.shopcartItem.title=this.productItem.title;
				//设置购物车商品的封面图片
				this.shopcartItem.image=this.productItem.images?`http:${this.productItem.images[0]}`:'http://vueshop.glbuys.com/uploadfiles/1484284030.jpg'
				//设置购物车商品对象的价格
				this.shopcartItem.price=this.productItem.price;
				//设置规格
				const params=[]
				for(const key of this.activeMap.keys()){
					params.push(`${key}:${this.activeMap.get(key)}`)
				}
				//添加到购物车规格中
				this.shopcartItem.params=params
				//设置运费
				this.shopcartItem.freight=this.productItem.freight;
				console.log('购物车对象',this.shopcartItem);
				//完成向购物车中添加信息
				this.addToShopcart({...this.shopcartItem})
				//关闭窗口
				this.closePop()
			},
			async getSafe(){
				const uid=this.userInfo.uid;
				const auth_token=this.authToken;
				const result=await uni.$api.mine.safeApi({uid,auth_token})
				console.log('aa',result);
				if(!result.data.status){
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
			
		},
		onLoad(options) {
			this.gid=options.gid;
			this.getProductDetail(options.gid)
			this.getReviewsByGid({gid:options.gid,page:this.page})
			this.getProductSpec(options.gid)
			
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;

		@include flex-box(start, center, column) .swiper {
			height: 750rpx;
			width: 750rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.pro-basic-box {
			margin-top: 10rpx;
			width: 720rpx;
			height: 200rpx;
			background-color: hotpink;
			border-radius: 10rpx;

			.other {
				@include flex-box(between, start, row) padding: 10rpx;
			}
		}

		.pro-gg-box {
			margin-top: 10rpx;
			width: 720rpx;
			background-color: hotpink;
			border-radius: 10rpx;

		}
		.pro-comment-box{
			margin-top: 10rpx;
			width: 720rpx;
			background-color: hotpink;
			border-radius: 10rpx;
			.main{
				.main-1{
					margin: 10rpx 5px;
					background-color: #fff;
					.main-1-1{
						display: flex;
						image{
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}
					}
				}
			}
			.bottom{
				@include flex-box(center,center,row)
				.btn{
					@include flex-box(center,center,row)
					width: 246rpx;
					height: 60rpx;
					border:1rpx solid $primary-color;
					background-color: #fff;
				}
			}
			
		}
		.nav-goods{
			position: sticky;
			bottom: 0;
			width: 750rpx;
		}
		.pop-box{
			position: relative;
			width: 750rpx;
			height: 800rpx;
			background-color: aqua;
			.close{
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
			.product-basic-box{
				font-size: 28rpx;
				@include flex-box(start,start,row)
				width: 750rpx;
				height: 120rpx;
				background-color: #fff;
				.product-basic-box-1{
					height: 100%;
					width: 150rpx;
					@include flex-box(center,center,row)
					image{
						
						width: 80rpx;
						height: 80rpx;
					}
				}
				.product-basic-box-2{
					box-sizing: border-box;
					padding: 10rpx;
					flex-grow: 1;
					height: 100%;
					@include flex-box(between,start,column);
					.product-basic-box-2-top{
						
					}
					.product-basic-box-2-bottom{
						.price{
							color: #f00;
						}
						width: 100%;
						@include flex-box(between,center,row)
					}
				}
			}
			
			.product-other-box{
				.product-spec-box{
					.main{
						@include flex-box(start,start,row)
						.spec-item{
							background-color: #ccc;
							padding: 10rpx 20rpx;
							border-radius: 10rpx;
							margin:20rpx;
						}
						.active{
							background-color: #ffa500;
							color: #fff;
						}
					}
				}
				.product-count-box{
					@include flex-box(between,start,row)
					padding: 10rpx 20rpx;
				}
			}
			.confirmBtnbox{
				position: absolute;
				bottom: 0;
				.confirmbtn{
					width: 750rpx;
				}
			}
		}
	}
</style>